<template>
    <div class="commentPage">
        <header>
            <div class="search">
                <el-input placeholder="请输入内容" v-model="pro_title" class="input-with-select">
                    <el-select v-model="pro_id" slot="prepend" placeholder="请选择">
                        <el-option label="全部" value></el-option>
                        <el-option label="产品名" value="1"></el-option>
                        <el-option label="产品ID" value="2"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="seachComments"></el-button>
                </el-input>
            </div>
            <div class="operation">
                <!--<form id="form"-->
                <!--&gt;-->
                <!--<input type="file" name="excel">-->
                <!--</form>-->
                <!--<button type="submit" @click="submit">导入</button>-->
                <el-button icon="el-icon-download" @click="downloadExcel">下载模板</el-button>
                <el-upload
                    style="margin-left: 10px; margin-right: 10px"
                    class="upload-demo"
                    action
                    multiple
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="changeFile"
                    :before-upload="beforeAvatarUpload"
                    :limit="1"
                >
                    <el-button icon="el-icon-upload">导入模板</el-button>
                </el-upload>
                <!--<el-button  icon="el-icon-upload">导入模板</el-button>-->
                <el-button type="primary" icon="el-icon-plus" @click="addComments">新增评论</el-button>
            </div>
        </header>
        <el-main class="main">
            <el-table
                class="table"
                :data="tableData"
                height="90%"
                v-loading="loading"
                style="width: 100%; margin-top: 15px"
            >
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="pro_title" label="产品信息"></el-table-column>
                <el-table-column prop="pro_id" label="产品ID"></el-table-column>
                <el-table-column prop="username" label="用户名称"></el-table-column>
                <el-table-column prop="content" label="评论内容"></el-table-column>
                <el-table-column prop="addtime" label="添加时间"></el-table-column>
                <el-table-column prop="address" width="180" label="操作">
                    <template slot-scope="scope">
                        <span class="btn">
                            <el-button size="mini" @click="editComments(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="delComments(scope.row)">删除</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pageAtion"
                :current-page.sync="page"
                @current-change="handleCurrentChange"
                :page-size="10"
                layout="prev, pager, next"
                background
                :total="total"
            ></el-pagination>
        </el-main>
        <el-dialog :title="commentsTit" :visible.sync="dialogVisible" width="65%">
            <el-form ref="form" label-width="80px" class="elform">
                <el-form-item label="选择产品">
                    <el-input v-model="form.proName" placeholder="请选择产品" @focus="openProduct"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="form.username" placeholder="请选择内容"></el-input>
                </el-form-item>
                <el-form-item label="是否匿名">
                    <el-switch
                        v-model="form.is_anony"
                        active-color="rgb(19, 206, 102)"
                        inactive-color="#666"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="星级">
                    <el-rate v-model="form.star"></el-rate>
                </el-form-item>
                <el-form-item label="评价内容">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 8}"
                        placeholder="请输入评价内容"
                        v-model="form.content"
                    ></el-input>
                </el-form-item>
                <el-form-item label>
                    <el-upload
                        action="/api/Discuss/imgUpload"
                        list-type="picture-card"
                        :auto-upload="true"
                        :headers="myHeaders"
                        multiple
                        :file-list="fileList"
                        :on-success="successPic"
                        :on-remove="handleRemove"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible1">
                        <img width="100%" :src="dialogImageUrl" alt />
                    </el-dialog>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveComments">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="选择产品" :visible.sync="dialogProduct" width="60%">
            <div class="pro_content">
                <div class="search" style="margin-bottom: 10px">
                    <el-input placeholder="请输入内容" v-model="pro_name" class="input-with-select">
                        <el-select v-model="id" slot="prepend" placeholder="请选择">
                            <el-option label="全部" value></el-option>
                            <el-option label="产品名" value="1"></el-option>
                            <el-option label="产品ID" value="2"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="seachproduct"></el-button>
                    </el-input>
                </div>
                <el-table :data="proData" style="width: 100%" height="90%">
                    <el-table-column prop="id" label="产品ID" width="180"></el-table-column>
                    <el-table-column prop="thumb" label="缩略图" width="180">
                        <template slot-scope="scope">
                            <img :src="scope.row.thumb" alt style="width: 64px" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="pro_name_admin" label="名称"></el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="selectPro(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="pageAtion"
                    :current-page.sync="pageNo"
                    :page-size="10"
                    layout="prev, pager, next"
                    background
                    @current-change="handleCurrentChangePro"
                    :total="pageTotal"
                ></el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogProduct = false">取 消</el-button>
                <el-button type="primary" @click="dialogProduct = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Service from "../../services/main";
import { $local } from "../../assets/utils/utils";
export default {
    name: "Comment",
    data() {
        return {
            detailItem: {},
            proitem: "",
            pageTotal: 30,
            proPage: 1,
            pro_name: "",
            id: "",
            proData: [],
            dialogProduct: false,
            fileList: [],
            myHeaders: {
                cstoken: $local("userInfo").token
            },
            dialogImageUrl: "",
            dialogVisible1: false,
            form: {
                proName: "",
                username: "",
                star: 5,
                content: "",
                is_anony: true
            },
            commentsTit: "新增评论",
            dialogVisible: false,
            pro_title: "",
            pro_id: "",
            page: 1,
            pageNo: 1,
            total: 20,
            tableData: [],
            loading: false,
            input3: ""
        };
    },
    watch: {
        proitem(val) {
            if (val) {
                this.form.proName = val.pro_name_admin;
            }
        },
        dialogVisible(val) {
            if (!val) {
                this.detailItem = {};
                this.fileList = [];
                this.form.proName = "";
                this.form.username = "";
                this.form.star = 5;
                this.form.content = "";
                this.form.is_anony = true;
                this.proitem = "";
            }
        }
    },
    created() {
        this.getDisList();
    },
    methods: {
        // 列表
        getDisList(val) {
            let params = {
                pro_title: this.pro_id === "1" ? this.pro_title : "",
                pro_id: this.pro_id === "2" ? this.pro_title : "",
                page: this.page
            };
            Service.getDisList(this, params).then(res => {
                if (res.errorCode === 0) {
                    this.tableData = res.result.list;
                    if (!val) {
                        this.total = res.result.total;
                        this.page = res.result.page;
                    }
                }
            });
        },
        // handleCurrentChange 分页
        handleCurrentChange(val) {
            this.page = val;
            this.getDisList();
        },
        handleCurrentChangePro(val) {
            this.pageNo = val;
            this.openProduct();
        },
        // 搜索
        seachComments() {
            this.getDisList("val");
        },
        // 下载模板
        downloadExcel() {
            window.location.href = "/api/Login/downloadExcel";
        },
        beforeAvatarUpload(file) {
            console.log(file);
            return;
        },
        // 图片上传
        changePic(file) {
            let uploadForm = new FormData();
            uploadForm.append("img", file.raw);
            Service.imgUpload(this, uploadForm).then(res => {
                if (res.errorCode === 1015) {
                    this.$notify({
                        title: "提示",
                        message: res.errorMsg,
                        type: "success"
                    });
                    this.getDisList();
                } else {
                    this.$notify({
                        title: "提示",
                        message: res.errorMsg,
                        type: "warning"
                    });
                }
            });
        },
        // 文件上传
        changeFile(file) {
            let str = file.raw.name;
            if (str.includes("xlsx") || str.includes("xls")) {
                let uploadForm = new FormData();
                uploadForm.append("excel", file.raw);
                Service.importHandle(this, uploadForm).then(res => {
                    if (res.errorCode === 1015) {
                        this.$notify({
                            title: "提示",
                            message: res.errorMsg,
                            type: "success"
                        });
                        this.getDisList();
                    } else {
                        this.$notify({
                            title: "提示",
                            message: res.errorMsg,
                            type: "warning"
                        });
                    }
                });
            } else {
                this.$notify({
                    title: "警告",
                    message: "导入的模板只能为xlsx，xls",
                    type: "warning"
                });
            }
        },
        // 删除评论
        delComments(item) {
            let params = {
                id: item.id
            };
            Service.disDel(this, params).then(res => {
                if (res.errorCode === 0) {
                    this.$notify({
                        title: "提示",
                        message: "删除成功",
                        type: "success"
                    });
                    this.getDisList();
                }
            });
        },
        // 编辑评论
        editComments(item) {
            this.detailItem = item;
            this.form.proName = item.pro_title;
            this.form.username = item.username;
            this.form.star = item.star;
            this.form.content = item.content;
            this.form.is_anony = item.is_anony === 2 ? true : false;
            //
            let arr = [];
            item.pic &&
                item.pic.forEach(item => {
                    let str = item.split("/upload/");
                    arr.push({
                        url: item,
                        path: "/upload/" + str[1]
                    });
                });
            this.fileList = arr;
            this.dialogVisible = true;
        },
        // addComments 新增评论
        addComments() {
            this.dialogVisible = true;
        },
        handleRemove(file, fileList) {
            let params = {
                img_url: file.response.result.path
            };
            Service.imgDel(this, params).then(res => {
                if (res.errorCode === 0) {
                    this.$notify({
                        title: "提示",
                        message: "删除成功",
                        type: "success"
                    });
                }
            });
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            // this.dialogVisible1 = true;
        },
        // 上传文件
        addFile(file) {
            console.log(file);
        },
        successPic(response, file, fileList) {
            this.fileList = fileList;
        },
        // openProduct 聚焦用于选产品
        openProduct(val) {
            let params = {
                id: this.id === "2" ? this.pro_name : "",
                pro_name_admin: this.id === "1" ? this.pro_name : "",
                page: this.proPage
            };
            this.dialogProduct = true;
            Service.getProList(this, params).then(res => {
                this.proData = res.result.list;
                if (!val) {
                    this.pageTotal = res.result.total;
                    this.pageNo = res.result.page;
                }
            });
        },
        // selectPro 选择产品
        selectPro(item) {
            this.proitem = item;
            this.dialogProduct = false;
        },
        // seachproduct 搜索
        seachproduct() {
            this.openProduct("val");
        },
        // 保存评论
        saveComments() {
            if (!this.detailItem.id) {
                let params = {
                    pro_id: this.proitem.id,
                    username: this.form.username,
                    content: this.form.content,
                    star: this.form.star
                };
                let pic = [];
                this.fileList &&
                    this.fileList.forEach(item => {
                        item.response && pic.push(item.response.result.path);
                        // !item.response && pic.push(item.path);
                    });
                const myparams = {
                    ...params,
                    is_anony: this.form.is_anony ? 2 : 1,
                    pic: JSON.stringify(pic)
                };
                Service.disAdd(this, myparams).then(res => {
                    if (res.errorCode === 0) {
                        this.$notify({
                            title: "提示",
                            message: "保存评论成功！",
                            type: "success"
                        });
                        this.dialogVisible = false;
                        this.getDisList();
                        this.fileList = [];
                        this.fileList = [];
                        this.form.proName = "";
                        this.form.username = "";
                        this.form.star = 5;
                        this.form.content = "";
                        this.form.is_anony = true;
                    }
                });
            } else {
                let params = {
                    id: this.detailItem.id,
                    pro_id: this.detailItem.pro_id,
                    username: this.form.username,
                    content: this.form.content,
                    star: this.form.star
                };
                let pic = [];
                this.fileList &&
                    this.fileList.forEach(item => {
                        item.response && pic.push(item.response.result.path);
                        !item.response && pic.push(item.path);
                    });
                const myparams = {
                    ...params,
                    is_anony: this.form.is_anony ? 2 : 1,
                    pic: JSON.stringify(pic)
                };
                Service.disEdit(this, myparams).then(res => {
                    if (res.errorCode === 0) {
                        this.$notify({
                            title: "提示",
                            message: "保存评论成功！",
                            type: "success"
                        });
                        this.dialogVisible = false;
                        this.getDisList();
                        this.detailItem = {};
                        this.fileList = [];
                        this.form.proName = "";
                        this.form.username = "";
                        this.form.star = 5;
                        this.form.content = "";
                        this.form.is_anony = true;
                    }
                });
            }
            // this.dialogVisible = false;
        }
    }
};
</script>

<style lang="scss" scoped>
.commentPage {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}
.search {
    width: 400px;
    float: left;
}
.operation {
    float: right;
    display: flex;
    width: 400px;
}
.el-select {
    width: 100px;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
.main {
    flex: auto;
    height: 100%;
}
.pageAtion {
    float: right;
}
.el-rate {
    margin-top: 10px;
}
.elform {
    width: 80%;
    margin: 0 auto;
}
.pro_content {
    width: 94%;
    margin: auto;
    height: 700px;
}
.dialog {
    margin-top: 10vh;
}
.el-select .el-input {
    width: 100px;
}
</style>
